<template>
    <div class="base-page" :style="{ height: screenHeight - 20 + 'px' }">
        <!-- <div class="left">
            <select-org @select="onSelectOrg" />
        </div> -->
        <!-- 列表 -->
        <div style="height: 100%" class="right" v-show="viewList === true">
            <div class="e-table">
                <div class="top right-div1">
                    <div class="left">
                        <div class="left-btn">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="goAdd"
                                class="btn-greenYellow"
                                >新增</el-button
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="e-table" :style="{ height: screenHeight - 50 + 'px' }">
                <el-table
                    :data="tableData"
                    border
                    :cell-class-name="cellClsNm"
                    @cell-mouse-enter="cellMouseEnter"
                    @cell-mouse-leave="cellMouseLeave"
                    @current-change="tableSelect"
                    @cell-dblclick="tableDbShow"
                    class="table"
                >
                    <el-table-column show-overflow-tooltip fixed label="操作" width="200">
                        <template slot-scope="{ row }">
                            <div class="oparation_box">
                                <div>
                                    <i
                                        class="el-icon-edit"
                                        style="font-size: 24px"
                                        :class="{
                                            'icon-edit-active-color': MouseEnterId == row.id
                                        }"
                                        @click="tableDbEdit(row)"
                                    ></i>
                                </div>
                                <div>
                                    <i
                                        class="el-icon-delete"
                                        style="font-size: 24px"
                                        :class="{
                                            'icon-delete-active-color': MouseEnterId == row.id
                                        }"
                                        @click="tableDbDelete(row)"
                                    ></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="模板名称" min-width="200">
                    </el-table-column>
                    <el-table-column prop="tenderClass" label="招标类别" width="300">
                        <template slot-scope="{ row }">
                            <span>{{
                                tenderClass.find(x => x.value === row.tenderClass).label
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tenderFormName" label="招标方式" width="300">
                        <template slot-scope="{ row }">
                            <span>{{
                                tenderForm.find(x => x.value === row.tenderFormName).label
                            }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <ComPagination
                    @update:currentPage="currentChange"
                    :currentPage="pagination.page"
                    @update:pageSize="updatePageSize"
                />
            </div>
        </div>
        <!-- 新增编辑界面 -->
        <div class="right" v-if="viewList === 'add' || viewList === 'edit'">
            <div class="e-form" style="padding: 0 10px 10px">
                <div class="tabs-title">{{ dicName }}</div>
                <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="模板名称：" prop="name">
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="招标类别：" prop="tenderClass">
                                <el-select v-model="formData.tenderClass">
                                    <el-option
                                        v-for="(item, index) in tenderClass"
                                        :label="item.label"
                                        :value="item.value"
                                        :key="index"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="招标方式：" prop="tenderForm">
                               <el-select v-model="formData.tenderForm"
                                @change="getTenderFormVal">
                                    <el-option
                                        v-for="(item,index) in tenderForm"
                                        :label="item.label"
                                        :value="item.value"
                                        :key="index
                                    ">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="模板内容：" prop="content">
                                <quill-editor
                                    ref="QuillEditor"
                                    class="editor"
                                    v-model="formData.content"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="footer">
                <div class="right-btn">
                    <el-button type="primary" size="mini" @click="onSave">保存</el-button>
                    <el-button type="default" size="mini" @click="onCancel">取消</el-button>
                </div>
            </div>
        </div>
        <!-- 详情界面 -->
        <div class="right" v-if="viewList === 'show'">
            <div class="e-form" style="padding: 0 10px 10px">
                <div class="tabs-title">{{ dicName }}</div>
                <el-form ref="formShow" :model="formData" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="模板名称：" prop="name">
                                <span>{{ formData.name }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="招标类别：" prop="tenderClass">
                                <span>{{
                                    tenderClass.find(x => x.value === formData.tenderClass).label
                                }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="招标方式：" prop="tenderForm">
                                <span>{{
                                    tenderForm.find(x => x.value === formData.tenderFormName).label
                                }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="模板内容：" prop="content">
                                <quill-editor
                                    ref="QuillEditor"
                                    class="editor"
                                    v-model="formData.content"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="footer">
                <div class="right-btn">
                    <el-button type="default" size="mini" @click="onCancel">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
// import SelectOrg from '@/components/selectOrg'
// import Pagination from '@/components/pagination/pagination'
import { debounce } from '@/utils/common'
import {
    bidWinningNoticeList,
    bidWinningNoticeBase,
    bidWinningNoticeDelete,
    bidWinningNoticeAdd,
    bidWinningNoticeUpdate
} from '@/api/base/bidding'
import { mapState } from 'vuex'
import ComPagination from '@/components/pagination/pagination.vue'
import quillEditor from '@/components/quillEditor.vue'
export default {
    components: {
        ComPagination,
        quillEditor
    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            treeData: [],
            paginationInfo: {
                total: 0,
                pageSize: 20,
                currentPage: 1
            },
            tableData: [],
            formData: {},
            params: {
                dicName: '',
                dicKey: '',
                isEnable: false
            },
            MouseEnterId: 0,
            selectData: null,
            currencyOptions: [],
            tabsName: 'baseInfo',
            tableData2: [],
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            idsTop: [],
            pagination: {
                limit: 10,
                page: 1,
                total: ''
            },
            rules: {
                name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
                tenderClass: [{ required: true, message: '请选择招标类别', trigger: 'change' }],
                tenderForm: [{ required: true, message: '请选择招标方式', trigger: 'change' }]
            },
            dicName: '中标通知书'
        }
    },
    computed: {
        // 列表宽度
        rightTableWidth () {
            return this.screenWidth - 280 + 'px'
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return this.screenWidth - 300 + 'px'
        },
        ...mapState({
            userInfo: state => state.userInfo,
            tenderForm: state => state.biddingApplication.dictionaries.tenderForm,
            tenderClass: state => state.biddingApplication.dictionaries.tenderClass
        })
    },
    watch: {},
    created () {
        this.getTableData()
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {
        //获取招标方式
        getTenderFormVal (val) {
            this.formData.tenderForm = val
            this.formData.tenderFormName = val
        },
        getTableData () {
            bidWinningNoticeList(this.pagination).then(res => {
                this.tableData = res.list
                this.pagination.total = res.totalCount
            })
        },
        onSelectOrg (val) {
            console.log('onSelectOrg: ', { ...val })
            this.formData = {
                ...val,
                currency: 10
            }
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        onSearch (e) {
            let searchKey = e
            console.log('searchKey', searchKey)
            this.params.dicKey = searchKey
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            console.log(searchKey)
            this.getTableData()
        },
        goAdd () {
            this.viewList = 'add'
            this.formData = {
                content: '',
                founderId: '',
                founderName: '',
                gmtCreate: '',
                gmtModified: '',
                id: '',
                name: '',
                orgId: '',
                orgName: '',
                tenderClass: '',
                // 'tenderForm': this.tenderForm[0].kvId,
                tenderForm: this.tenderForm[0],
                // 'tenderFormName': this.tenderForm[0].kvKey
                tenderFormName: this.tenderForm[0]
            }
        },
        onEdit () {
            if (!this.selectData) return
            this.viewList = 'edit'
            this.formData = this.selectData
        },
        onDistPost () {
            this.viewList = 'post'
        },
        onSave () {
            // this.formData.tenderFormName = this.tenderForm.find(x=>x.kvId === this.formData.tenderForm ).kvKey
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.viewList === 'add') {
                        this.formData.orgName = this.userInfo.orgInfo.orgName
                        this.formData.orgId = this.userInfo.orgInfo.orgId
                        bidWinningNoticeAdd(this.formData).then(() => {
                            this.clientPop('suc', '保存成功', () => {
                                this.viewList = true
                                this.getTableData()
                            })
                        })
                    } else if (this.viewList === 'edit') {
                        bidWinningNoticeUpdate(this.formData).then(() => {
                            this.clientPop('suc', '保存成功', () => {
                                this.viewList = true
                                this.getTableData()
                            })
                        })
                    }
                }
            })
        },
        //取消
        onCancel () {
            this.viewList = true
        },
        //表格选中
        tableSelect (row) {
            this.selectData = row
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //编辑
        tableDbEdit (row) {
            if (!row) return
            bidWinningNoticeBase(row.id).then(res => {
                this.formData = res
                this.viewList = 'edit'
            })
        },
        //详情
        tableDbShow (row) {
            if (!row) return
            bidWinningNoticeBase(row.id).then(res => {
                this.formData = res
                this.viewList = 'show'
            })
        },
        tableDbDelete (row) {
            this.clientPop(
                'err',
                this.oneDeleteErr,
                () => {
                    bidWinningNoticeDelete(row.id).then(() => {
                        this.clientPop('suc', '删除成功', () => {
                            this.viewList = true
                            this.getTableData()
                        })
                    })
                }
            )
        },
        currentChange (page) {
            this.pagination.page = page
            this.getTableData()
        },
        updatePageSize (limit) {
            this.pagination.limit = limit
            this.getTableData()
        }
    }
}
</script>

<style lang="scss" scoped>
.right {
    border: none;
}
</style>
